<template>
    <div class="content">
        <div class="control-box">

            <div>
                <el-button type="primary" @click="editBoxSwitch">添加产品</el-button>
            </div>
            <div class="control-right">
                <el-input type="text" v-model="searchStr" class="search-input" @keyup.enter="handleEnter"
                    placeholder="请输入产品名称"></el-input>
                <el-button type="primary" @click="searchHandle">查询</el-button>
            </div>

        </div>
        <div class="table-box">
            <el-table :data="tableData" border stripe style="width: 100%">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="id" label="Id" width="80" fixed="left" />
                <!-- <el-table-column prop="productId" label="产品Id" width="120" /> -->
                <el-table-column prop="productName" label="产品名称" width="180" fixed="left"
                    :show-overflow-tooltip="true" />
                <el-table-column label="产品图片" width="100">
                    <template #default="scope">
                        <div style="height: 23px;text-align: center">
                            <img :src="scope.row.productPicture" alt="" style="width: 23px;"
                                @click="showPreview(scope.row)">


                        </div>
                    </template>
                </el-table-column>

                <el-table-column prop="dosageForm" width="100" label="剂型" />
                <el-table-column prop="spec" width="120" label="规格" />
                <el-table-column prop="barCode" width="140" label="商品条形码" />

                <el-table-column prop="placeOfOrigin" width="120" label="归属仓" />
                <el-table-column prop="supplies" width="300" label="主要成分" :show-overflow-tooltip="true" />
                <el-table-column prop="eatingPattern" width="180" label="服用方式" />
                <el-table-column prop="inventory" width="180" label="库存" />
                <el-table-column prop="brand" width="180" label="品牌" />
                <el-table-column prop="price" width="90" label="原价" />
                <el-table-column prop="currentPrice" width="90" label="现价" />
                <el-table-column label="生产日期" width="120">
                    <template #default="scope">
                        <div>{{ scope.row.MFG == null ? '' : this.FormatDate(scope.row.MFG).split(' ')[0] }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="保质日期" width="120">
                    <template #default="scope">
                        <div>{{ this.FormatDate(scope.row.EXP).split(' ')[0] }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180">
                    <template #default="scope">
                        <div>{{ this.FormatDate(scope.row.createTime) }}</div>
                    </template>
                </el-table-column>

                <el-table-column label="更新时间" width="180">
                    <template #default="scope">
                        <div>{{ this.FormatDate(scope.row.lastUpdateTime) }}</div>
                    </template>
                </el-table-column>


                <el-table-column fixed="right" label="操作" min-width="120" prop="id">
                    <template #default="scope">
                        <el-button link type="danger" size="small" @click="handleClick(scope.row)">删除</el-button>
                        <el-button link type="primary" size="small" @click="editHandle(scope.row)">编辑</el-button>
                        <!-- <el-button link type="info" size="small" @click="checkHandle(scope.row)">查看</el-button> -->
                    </template>
                </el-table-column>
            </el-table>

            <div class="paging-box">
                <el-pagination layout="total, prev, pager, next" background :default-page-size="pageSize"
                    :total="totalNum" @change="pagingChange" />
            </div>

        </div>



        <!-- 弹出框 -->
        <el-dialog v-model="editBoxShow" :title="isEdit ? '编辑产品信息' : '新建产品信息'" width="600" custom-class="page-dialog"
            @close="editClose">
            <div class="pop-up-content">
                <el-form class="pop-up-form" :model="form" label-width="auto" style="max-width: 600px" :rules="rules">
                    <el-form-item label="产品名称" prop="productName">
                        <el-input v-model="form.productName" placeholder="请输入产品名称" />
                    </el-form-item>
                    <el-form-item label="产品图片">
                        <el-upload v-model:file-list="fileList" method="post" :limit="limit"
                            action="https://vesitin.com/api/upload/uploadImg" list-type="picture-card"
                            :on-success="productPictureSuccess" :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove">

                            <el-icon style="font-size: 20px">
                                <Plus></Plus>
                            </el-icon>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="服用方式">
                        <el-select v-model="form.eatingPattern" placeholder="请选择服用方式">
                            <el-option v-for="item, index in eatingPatternList" :key="index" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="原价">
                        <el-input-number v-model="form.price" :precision="2" :step="0.1" :max="100000">
                            <template #prefix>
                                <span>￥</span>
                            </template>
                        </el-input-number>
                    </el-form-item>
                    <el-form-item label="现价">
                        <el-input-number v-model="form.currentPrice" :precision="2" :step="0.1" :max="100000" />
                    </el-form-item>
                    <el-form-item label="产地">
                        <el-input v-model="form.placeOfOrigin" placeholder="请输入产地" />
                    </el-form-item>
                    <el-form-item label="主要成分">
                        <el-input v-model="form.supplies" placeholder="请输入产品主要成分" type="textarea" />
                    </el-form-item>

                    <el-form-item label="生产日期">
                        <el-date-picker v-model="form.MFG" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
                            placeholder="请选择生产日期" />
                    </el-form-item>
                    <el-form-item label="保质日期">
                        <el-date-picker v-model="form.EXP" type="date" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
                            placeholder="请选择保质日期" />
                    </el-form-item>
                    <el-form-item label="商品条形码">
                        <el-input v-model="form.barCode" placeholder="请输入商品条形码" />
                    </el-form-item>
                    <el-form-item label="库存">
                        <el-input-number v-model="form.inventory" :step="1" />
                    </el-form-item>
                    <el-form-item label="品牌">
                        <el-input v-model="form.brand" placeholder="请输入品牌" />
                    </el-form-item>
                    <el-form-item label="剂型">
                        <el-select v-model="form.dosageForm" placeholder="请选择剂型号">
                            <el-option v-for="item, index in dosageFormList" :key="index" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="规格">

                        <el-select v-model="form.spec" placeholder="请选择规格">
                            <el-option v-for="item, index in specList" :key="index" :label="item.name"
                                :value="item.value" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="editBoxShow = false">取消</el-button>
                    <el-button type="primary" @click="onSubmit">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>


        <el-dialog v-model="imgVisible" width="632px">
            <el-image style="width: 600px; height: 600px" :src="dialogImageUrl" fit="contain" zoom-rate="1"
                max-scale="2" />
            <!-- <img w-full :src="dialogImageUrl" alt="Preview Image" class="full-img" /> -->
        </el-dialog>

    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue'


export default {
    // name: 'ProductPage',
    data() {
        return {
            tableData: [],
            totalNum: 0,
            searchStr: '',
            pageSize: 16,
            pageIndex: 1,
            limit: 1,
            isEdit: false,
            imgVisible: false,//显示大图
            editBoxShow: false,
            dialogImageUrl: '',//预览图片
            dialogVisible: '',
            form: {
                productName: '',//产品名称
                price: 0,//价格
                currentPrice: 0,//现价
                productPicture: '',//产品图片
                placeOfOrigin: '',//产地
                eatingPattern: '',//服用方式
                supplies: '',//主要成分
                MFG: this.Format(new Date(), 'YYYY-MM-DD'),//生产日期
                EXP: this.Format(new Date(), 'YYYY-MM-DD'),//保质日期
                barCode: '',//产品条形码
                dosageForm: '',//剂型
                spec: '',//规格
                brand: '维他希汀',//品牌
                inventory: 0//库存
            },
            rules: {
                productName: [
                    {
                        required: true,
                        message: '产品名称不可为空',
                        trigger: 'blur'
                    },
                ],
            },
            fileList: [],
            eatingPatternList: [
                { name: '一日一次，一次一粒', value: '一日一次，一次一粒' },
                { name: '一日两次，一次一粒', value: '一日两次，一次一粒' },
                { name: '一日三次，一次一粒', value: '一日三次，一次一粒' },
                { name: '一日一次，一次两粒', value: '一日一次，一次两粒' },
                { name: '一日两次，一次两粒', value: '一日两次，一次两粒' },
                { name: '一日三次，一次两粒', value: '一日三次，一次两粒' },

            ],
            dosageFormList: [
                { name: '片', value: '片' },
                { name: '胶囊', value: '胶囊' }
            ],
            specList: [
                { name: '30/瓶', value: '30/瓶' },
                { name: '60/瓶', value: '60/瓶' },
                { name: '90/瓶', value: '90/瓶' },
                { name: '120/瓶', value: '120/瓶' },
                { name: '150/瓶', value: '150/瓶' }
            ]
        }
    },
    components: {
        Plus,
        // Delete
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            let _this = this;
            this.$axios({
                method: 'post',
                url: '/api/product/productList',
                data: { searchStr: this.searchStr, pageSize: this.pageSize, pageIndex: this.pageIndex }
            }).then(res => {
                console.log(res);
                _this.tableData = res.data.data;
                _this.totalNum = res.data.totalNum;
            })
        },

        // 表单提交
        onSubmit() {
            let _this = this;

            if (this.form.productName == '') {
                ElMessage({
                    type: 'info',
                    message: '请输入产品名称'
                })
                return;
            }

            if (this.isEdit) {
                this.$axios({
                    method: 'post',
                    url: '/api/product/updateProduct',
                    data: this.form
                }).then(res => {
                    if (res.data.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '提交成功',
                        })
                        _this.getList();
                        _this.editBoxShow = false;
                    } else {
                        ElMessage({
                            type: 'info',
                            message: '失败'
                        })
                    }

                })
            } else {
                this.$axios({
                    method: 'post',
                    url: '/api/product/createProduct',
                    data: this.form
                }).then(res => {
                    if (res.data.code == 0) {
                        ElMessage({
                            type: 'success',
                            message: '提交成功',
                        })
                        _this.getList();
                        _this.editBoxShow = false;
                    } else {
                        ElMessage({
                            type: 'info',
                            message: '失败'
                        })
                    }

                })
            }


        },

        FormatDate(date) {
            return this.$moment(date).format('YYYY-MM-DD HH:mm:ss');
        },

        Format(date, str) {
            return this.$moment(date).format(str);
        },

        handleClick(row) {

            let _this = this;

            ElMessageBox.confirm(
                '是否删除该产品?',
                '提醒',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
                .then(() => {
                    _this.$axios({
                        method: 'post',
                        url: '/api/product/deleteProduct',
                        data: { id: row.id }
                    }).then(res => {
                        if (res.data.code == 0) {
                            ElMessage({
                                type: 'success',
                                message: '删除成功',
                            })
                            _this.getList();
                        }

                    })

                })
                .catch(() => {
                    ElMessage({
                        type: 'info',
                        message: '取消删除',
                    })
                })

        },


        searchHandle() {
            this.getList();
        },

        handleEnter() {
            this.getList();
        },

        searchStrChange(e) {
            console.log(e);
        },

        selectable() {
            console.log(';;')
        },


        pagingChange(e) {
            console.log(e);

            this.pageIndex = e;

            this.getList()
        },

        // 编辑框关闭
        editClose() {
            this.fileList = [];
            this.form = {
                productName: '',//产品名称
                price: 0,//价格
                currentPrice: 0,//现价
                productPicture: '',//产品图片
                placeOfOrigin: '',//产地
                eatingPattern: '',//服用方式
                supplies: '',//主要成分
                MFG: this.Format(new Date(), 'YYYY-MM-DD'),//生产日期
                EXP: this.Format(new Date(), 'YYYY-MM-DD'),//保质日期
                barCode: '',//产品条形码
                dosageForm: '胶囊',//剂型
                spec: '',//规格
                brand: '维他希汀',//品牌
                inventory: 0//库存
            }

            console.log(this.form);
        },

        editBoxSwitch() {
            this.isEdit = false;
            this.editBoxShow = !this.editBoxShow;
            console.log(new Object(this.form.MFG))
        },

        handleRemove: (uploadFile, uploadFiles) => {
            console.log(uploadFile, uploadFiles)
        },

        productPictureSuccess(res) {
            // console.log(e);

            this.form.productPicture = res.data;

        },

        // 编辑
        editHandle(data) {
            // console.log(data.id);
            this.isEdit = true;

            this.fileList = [{ url: data.productPicture }];
            console.log(this.fileList);
            this.form = {
                id: data.id,
                productName: data.productName,//产品名称
                price: data.price,//价格
                currentPrice: data.currentPrice,//现价
                productPicture: data.productPicture,//产品图片
                placeOfOrigin: data.placeOfOrigin,//产地
                eatingPattern: data.eatingPattern,//服用方式
                supplies: data.supplies,//主要成分
                MFG: data.MFG.split('T')[0],//生产日期
                EXP: data.EXP.split('T')[0],//保质日期
                barCode: data.barCode,//产品条形码
                dosageForm: data.dosageForm,//主要成分
                spec: data.spec,//主要成分
                brand: data.brand,//主要成分
                inventory: data.inventory//主要成分
            };

            // this.fileList = [data.productPicture];

            this.editBoxShow = !this.editBoxShow;
        },

        handlePictureCardPreview: (uploadFile) => {

            console.log(';;;;===');

            this.dialogImageUrl.value = uploadFile.url;
            this.dialogVisible.value = true
        },

        // 展示缩略图
        showPreview(row) {
            this.imgVisible = true;
            this.dialogImageUrl = row.productPicture

        },
        // 查看
        checkHandle() { },
    }
}
</script>

<style scoped lang="less">
.page-content {
    display: flex;
    height: calc(100vh - 80px);

    .my-side {
        height: 100%;
    }

    .page-main {
        width: 100%;
        padding: 0 10px;

        .control-box {
            height: 60px;
            line-height: 60px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;

            .control-right {
                .search-input {
                    margin-right: 10px;
                    height: 30px;
                    line-height: 30px;
                    width: 300px;
                    padding: 0 5px;
                }
            }
        }

        .table-box {
            width: 100%;

            .paging-box {
                position: absolute;
                margin-top: 10px;
                right: 60px;
                bottom: 50px;
            }
        }
    }


}

.pop-up-form {
    height: 600px !important;
    overflow-y: scroll;
}


.pop-up-form {
    overflow: auto;
    /* 保持内容可滚动 */
    scrollbar-width: none;
    /* 对于 Firefox 隐藏滚动条 */
}

.pop-up-form::-webkit-scrollbar {
    display: none;
    /* 对于 Chrome, Safari 和 Opera 隐藏滚动条 */
}

.full-img {
    height: 600px;
}
</style>